<template>
	<div id="app">
	     <router-view ></router-view>
	</div>

</template>

<script>
  export default {
    name: 'app',
    data () {
      return {// 数据
        widthBox: 0, // 盒子宽
        heightBox: 0, // 盒子高
        transitionName: 'slide-right',
        tempTop: 0,
        showHead: null
      }
    },
    beforeMount: function () { // 挂载之前
    },
    watch: { // 偷偷观察模式
      '$route' (to, from, savedPosition) {
        // const toDepth = to.path.split('/').length;
        // const fromDepth = from.path.split('/').length;
        // this.transitionName = Math.random() > 0.5 ? 'slide-right' : 'slide-left';
        /* let num = Math.random() * 4
        if (num < 1) {
          return (this.transitionName = 'slide-right')
        } else if (num < 2) {
          return (this.transitionName = 'slide-left')
        } else if (num < 3) {
          return (this.transitionName = 'slide-top')
        } else {
          return (this.transitionName = 'slide-bottom')
        } */
      }
    },
    mounted: function () { // 挂载之后
    },
    beforeUpdate: function () { // 数据更新时调用,在渲染之前
      // this.showWindowSize();
    },
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {}, // 大杂烩,开心就好
    components: {}
  }
</script>
<style lang="scss">
	html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 
-webkit-tap-highlight-color: transparent;
} 

:focus { 
outline: 0; 
} 
body { 
line-height: 1; 
/*color: black; 
background: white; */
font-family: "Microsoft YaHei",sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
} 
input{
	font-family: "Microsoft YaHei",sans-serif;
	-webkit-appearance: none;
	}
ol, ul { 
list-style: none; 
} 
button{ 
	outline: none;border: none;
	}
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
text-align: left; 
font-weight: normal; 
} 
textarea { 
	resize:none;
	-webkit-appearance: none; 
	}
img{border:0;}
a{
	text-decoration:none;
	color: #000;
	font-size: 16px;
}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}
address,caption,cite,code,dfn,em,th,b,i {font-weight: normal;font-style: normal;}
.text-center{text-align: center;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix {*zoom:1; }


.child-view {
    position: absolute;
    width: 100%;
    transition: all 0.3s cubic-bezier(.55, 0, .1, 1);
    box-sizing: border-box;
  }

  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }

  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }

  .slide-top-enter, .slide-top-leave-active {
    opacity: 0;
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
  }

  .slide-bottom-leave-active, .slide-bottom-enter {
    opacity: 0;
    -webkit-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }

</style>